<template>
  <div style="height: 800px; border: 1px solid #ccc;">  
     <div class="block text-center" style="width: 100%;">
        <el-divider content-position="left">维修详情图片</el-divider>
        <el-carousel height="300px" motion-blur>
        <el-carousel-item v-for="item in repair.imgs" :key="item">
            <div class="image-container" style="height: 300px; overflow: hidden;">  
              <el-image  
                :src="Path.image + item"  
                fit="cover"  
                class="responsive-image"  
              ></el-image>  
            </div>
        </el-carousel-item>
        </el-carousel>
     </div>
     <div>
        <el-divider content-position="left">维修时间</el-divider>
        <p class="text" v-if="props.id">{{ repair.repairTime }}</p>
        <el-divider content-position="left">联系电话</el-divider>
        <p class="text" v-if="props.id">{{ repair.phone }}</p>
        <el-divider content-position="left">维修地址</el-divider>
        <p class="text" v-if="props.id">{{ repair.address }}</p>
        <el-divider content-position="left">维修内容</el-divider>
        <p class="text content" v-if="props.id">{{ repair.content }}</p>
     </div>
  </div>    
</template>

<script setup>  
import { get,post } from '@/plugins/axios';
import {ref,reactive} from "vue"
import Path from './path';
const props = defineProps(['id'])
const emits = defineEmits(['update:show','getTableData'])
let repair = ref({})
getNoticeById()
function getNoticeById(){
  get(Path.getById,{id:props.id},content => {
    repair.value = content
  })
}
</script>  

<style lang="scss" scoped>
.responsive-image {  
  width: auto;  
  height: 100%;    
}  
    
.image-container {  
  display: flex;  
  align-items: center;  
  justify-content: center; 
}  
.text{
  margin-left: 20px;
}
.content{
  width: 98%; /* 设定宽度 */  
  height: 200px; /* 设定高度 */  
  overflow-y: auto; /* 允许垂直滚动条 */  
  white-space: pre-wrap; /* 保持空白符序列，并允许文本自动换行 */  
  word-wrap: break-word; /* 防止长单词或URL地址无法被打断 */  
}
</style>